<template>
  <div class="classify-manage">
    <el-row>
      <el-col :span="6">
        <el-form ref="searchClassifyForm" :model="searchClassify" :inline="true">
          <el-form-item label="关键词：">
            <el-input v-model="searchClassify.keyWord"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="searchByKeyWord" type="primary" icon="el-icon-search">搜 索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="18" style="text-align: right;">
        <el-button @click="newDialogVisible = true" type="primary" icon="el-icon-plus">新增分类</el-button>
        <el-button @click="deleteClassify" type="primary" icon="el-icon-delete">删除分类</el-button>
      </el-col>
    </el-row>
    <div class="table-container">
      <el-table :data="tableData" ref="tableData" style="width: 100%" max-height="730" height="730" @select="tableSelect" @select-all="tableSelect" border stripe>
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="designation" label="分类名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="parent" label="父级分类"></el-table-column>
        <el-table-column prop="classifyType" label="分类类型"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="collectionNum" label="收藏数"></el-table-column>
        <el-table-column prop="uploadNum" label="上传数"></el-table-column>        
        <el-table-column prop="downloadNum" label="下载数"></el-table-column>
        <el-table-column prop="creator" label="创建人"></el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间"></el-table-column>
        <el-table-column label="编辑" width="100">
          <template slot-scope="scope">
            <el-button @click="modify(scope.row)" type="primary">修 改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
        <el-pagination
          id="pagination"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[12, 20, 30, 40, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalQuantity">
        </el-pagination>
    </div>
    <el-dialog title="新增分类" :visible.sync="newDialogVisible" width="36%" center>
      <el-form :model="newClassifyForm" ref="newClassifyForm" :rules="classifyRules" label-width="70px" >
        <el-form-item label="名称" prop="designation">
          <el-input v-model="newClassifyForm.designation" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <el-form-item label="父类" prop="parentId">
          <el-input v-model="currentChooseParentDesignation" placeholder="请选择父类" :disabled="true">
            <el-button @click="chooseParentIdDialogVisible = true" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="分类类型" prop="classifyType">
          <el-select v-model="newClassifyForm.classifyType" @change="classifyTypeChange">
            <el-option v-for="item in classifyTypes" :key="item.code" :label="item.designation" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="newClassifyForm.description" placeholder="请描述该分类" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="newDialogVisible = false">取 消</el-button>
        <el-button @click="addClassify" type="primary">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改分类" :visible.sync="modifyDialogVisible" width="36%" center>
      <el-form :model="modifyClassifyForm" ref="modifyClassifyForm" :rules="classifyRules" label-width="70px" >
        <el-form-item label="名称" prop="designation">
          <el-input v-model="modifyClassifyForm.designation" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <el-form-item label="父类" prop="parentId">
          <el-input v-model="currentChooseParentDesignation" placeholder="请选择父类" :disabled="true">
            <el-button @click="chooseParentIdDialogVisible = true" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="分类类型" prop="classifyType">
          <el-select v-model="modifyClassifyForm.classifyType" disabled >
            <el-option v-for="item in classifyTypes" :key="item.code" :label="item.designation" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="modifyClassifyForm.description" placeholder="请描述该分类" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="modifyDialogVisible = false">取 消</el-button>
        <el-button @click="modifyClassify" type="primary">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="选择父级分类" :visible.sync="chooseParentIdDialogVisible" width="30%" center>
      <el-tree :data="parentIdTree" @node-click="chooseParentId" ></el-tree>
      <span slot="footer">
        <el-button @click="confirmParentId" type="primary">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'Classify',
  data () {
    return {
      parentIdTree: [],
      classifyTypes: [],
      currentChooseParentDesignation: null,
      currentChooseParent: null,
      classifyTypeDesignation: null,
      modifyClassifyForm: {},
      newClassifyForm: {
        designation: null,
        parentId: null,
        classifyType: null,
        description: null
      },
      searchClassify: {
        keyWord: null
      },
      classifyRules: {
        designation: [
          {required: true, message: '分类名称不能为空', trigger: 'change'},
          {min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'change'}
        ],
        description: [
          {max: 100, message: '长度在 300 个字符以内', trigger: 'change'}
        ]
      },
      newDialogVisible: false,
      modifyDialogVisible: false,
      chooseParentIdDialogVisible: false,
      chooseClassifyTypeDialogVisible: false,
      tableData: [],
      deleteData: [],
      currentPage: 1,
      pageSize: 12,
      totalQuantity: 0
    }
  },
  methods: {
    classifyTypeChange (value) {
      this.initParentIdTree()
    },
    chooseParentId (node) {
      this.currentChooseParent = node
    },
    deleteClassify () {
      if (this.deleteData.length === 0) {
        this.$message.info('请选择要删除的分类')
      } else {
        this.$confirm('确定要删除当前选中的 ' + this.deleteData.length + ' 个分类吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await this.apiUtil.post('/ClassifyApi/delete', this.deleteData)
        }).then(() => {
          this.init()
        })
      }
    },
    confirmParentId () {
      this.newClassifyForm.parentId = this.currentChooseParent.id
      this.modifyClassifyForm.parentId = this.currentChooseParent.id
      this.currentChooseParentDesignation = this.currentChooseParent.label
      this.chooseParentIdDialogVisible = false
    },
    searchByKeyWord () {
      this.getTableDate()
    },
    addClassify () {
      this.$refs['newClassifyForm'].validate(async (valid) => {
        if (valid) {
          const result = await this.apiUtil.post('/ClassifyApi/save', this.newClassifyForm)
          if (result !== null) {
            this.newDialogVisible = false
            this.$refs['newClassifyForm'].resetFields()
            this.currentChooseParentDesignation = null
            this.init()
          }
        }
      })
    },
    async modify (data) {
      const result = await this.apiUtil.post('/ClassifyApi/findOneById', {id: data.id})
      if (result !== null) {
        result.parentId = null
        this.modifyClassifyForm = result
        this.modifyDialogVisible = true
      }
    },
    async modifyClassify () {
      this.$refs['modifyClassifyForm'].validate(async (valid) => {
        if (valid) {
          const result = await this.apiUtil.post('/ClassifyApi/update', this.modifyClassifyForm)
          if (result !== null) {
            this.modifyDialogVisible = false
            this.$refs['modifyClassifyForm'].resetFields()
            this.currentChooseParentDesignation = null
            this.init()
          }
        }
        this.$refs['modifyClassifyForm'].resetFields()
      })
    },
    tableSelect (selection) {
      this.deleteData = selection
    },
    async initClassifyTypes () {
      const result = await this.apiUtil.post('/DigitalDictionaryApi/getChildrenForSelect', {parentCode: '006'})
      // 初始化分类类别选项
      if (result !== null) {
        this.classifyTypes = result
        this.newClassifyForm.classifyType = this.classifyTypes[0].code
      }
    },
    async initParentIdTree () {
      const result = await this.apiUtil.post('/ClassifyApi/getParentTree', {classifyType: this.newClassifyForm.classifyType})
      if (result !== null) {
        this.parentIdTree = result
      }
    },
    async getTableDate () {
      const result = await this.apiUtil.post('/ClassifyApi/search',
      {currentPage: this.currentPage, pageSize: this.pageSize, keyWord: this.searchClassify.keyWord})
      if (result != null) {
        this.totalQuantity = result.totalElements
        this.tableData = result.content
      }
    },
    async init () {
      await this.getTableDate()
      await this.initClassifyTypes()
      await this.initParentIdTree()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getTableDate()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getTableDate()
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
.digital-dictionary .el-dialog--center .el-dialog__body{
  padding: 25px 27px 0px;
}
.pagination-container{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}
.pagination-container .el-pagination{
  font-weight: normal;
}
</style>

